<template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="合同标题">
            <el-input v-model="form.title" placeholder="请输入合同标题" clearable />
        </el-form-item>
        <el-form-item label="货主单位">
            <el-select v-model="form.flatsName" style="width: 150px;" placeholder="请输入货主单位" clearable>
                <el-option v-for="item in owners" :label="item.flatsName" :value="item.flatsName" />
            </el-select>
        </el-form-item>
        <el-form-item label="货主负责人">
            <el-select v-model="form.ownerName" style="width: 150px;" placeholder="请输入货主负责人" clearable>
                <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
            </el-select>
        </el-form-item>
        <el-form-item label="经办人">
            <el-select v-model="form.handlerName" style="width: 150px;" placeholder="请输入经办人" clearable>
                <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
            </el-select>
        </el-form-item>
        <el-form-item label="签订时间">
            <el-date-picker v-model="form.date" type="date" placeholder="Pick a date" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getownerapproval()">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="ownerContractNumber" label="合同编号" width="180" />
        <el-table-column prop="ownerContractTitle" label="合同标题" width="180" />
        <el-table-column prop="flatsName" label="货主单位" />
        <el-table-column prop="ownerName" label="货主负责人" />
        <el-table-column prop="lineName" label="线路" />
        <el-table-column prop="tonFreightPrice" label="吨运价" />
        <el-table-column prop="charterTonnage" label="包车条件吨位" />
        <el-table-column prop="charterPrice" label="包车金额" />
        <el-table-column prop="signedDate" label="签订日期">
            <template v-slot="scope">
                <span>{{ scope.row.signedDate.substring(0, 10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="handlerName" label="经办人" />
        <el-table-column prop="createDate" label="创建时间" />
        <el-table-column prop="ownerContractState" label="状态">
            <template v-slot="scope">
                <span v-if="scope.row.ownerContractState === 1">待提交</span>
                <span v-else-if="scope.row.ownerContractState === 2">待审批</span>
                <span v-else-if="scope.row.ownerContractState === 3">已通过</span>
                <span v-else-if="scope.row.ownerContractState === 4">已拒绝</span>
            </template>
        </el-table-column>
        <el-table-column prop="approvalName" label="审批人" />
        <el-table-column fixed="right" label="操作" min-width="140">
            <template v-slot="scope" #default>
                <el-button link type="primary" @click="addownercontract1(scope.row)">
                    查看
                </el-button>
                <el-button link type="primary" @click="addownercontract(scope.row)">审批</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[10, 15, 20, 30]" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    <el-dialog v-model="dialogVisible" title="待审批">
        <template #footer>
            <div class="dialog-footer">
                <el-form ref="ruleFormRef" :inline="true" :model="rows" :rules="rules" status-icon
                    class="demo-form-inline">
                    <el-form-item label="合同标题" prop="ownerContractTitle" style="width: 240px;">
                        <el-input v-model="rows.ownerContractTitle" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="货主单位" prop="flatsName" style="width: 240px;">
                        <el-select v-model="rows.flatsName" placeholder="请选择货主单位" :disabled="true" clearable>
                            <el-option v-for="item in owners" :label="item.flatsName" :value="item.flatsName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货主负责人" prop="ownerName" style="width: 240px;">
                        <el-select v-model="rows.ownerName" placeholder="请选择货主单位" :disabled="true" clearble>
                            <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线路" prop="lineName" style="width: 240px;">
                        <el-select v-model="rows.lineName" placeholder="请选择线路" :disabled="true" clearable>
                            <el-option v-for="item in lines" :label="item.line_Name" :value="item.line_Name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="吨 运 价" prop="tonFreightPrice" style="width: 240px;">
                        <el-input v-model="rows.tonFreightPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="包车条件吨位" prop="name" style="width: 240px;">
                        <el-input v-model="rows.charterTonnage" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="包车金额" prop="name" style="width: 240px;">
                        <el-input v-model="rows.charterPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="经办人" prop="handlerName" style="width: 240px;">
                        <el-select v-model="rows.handlerName" placeholder="请选择货主单位" :disabled="true" clearable>
                            <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签订时间" prop="signedDate" style="width: 240px;">
                        <el-date-picker v-model="rows.signedDate" type="date" placeholder="Pick a date" clearable
                            :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同金额" prop="name" style="width: 240px;">
                        <el-input v-model="rows.ownerContractPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同标的或项目说明" prop="name" style="width: 550px;">
                        <el-input v-model="rows.ownerContractContent" type="textarea" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同主要条款/变更条款" prop="name" style="width: 550px;">
                        <el-input v-model="rows.ownerContractAlter" type="textarea" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同文本（附件）" prop="name" style="width: 550px;">
                        <span :disabled="true">{{ rows.ownerContractText.substring(40, 200) }}</span>
                    </el-form-item><br>
                    <el-form-item label="审批备注" prop="name" style="width: 550px;">
                        <el-input v-model="rows.approvalContent" type="textarea" />
                    </el-form-item>
                    <el-form-item label="转批人" prop="approvalName" style="width: 240px; margin-right: 500px;">
                        <el-select v-model="rows.approvalName" placeholder="请选择货主单位" clearable>
                            <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
                        </el-select>
                    </el-form-item><br>
                    <el-form-item>
                        <el-button type="primary" style="text-align: center;" @click="addownerapprovals(1)">
                            通过
                        </el-button>
                        <el-button style="text-align: center;" @click="addownerapprovals(2)">拒绝</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible1" title="查看">
        <template #footer>
            <div class="dialog-footer">
                <el-form ref="ruleFormRef" :inline="true" :model="rows" :rules="rules" status-icon
                    class="demo-form-inline">
                    <el-form-item label="合同标题" prop="ownerContractTitle" style="width: 240px;">
                        <el-input v-model="rows.ownerContractTitle" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="货主单位" prop="flatsName" style="width: 240px;">
                        <el-select v-model="rows.flatsName" placeholder="请选择货主单位" :disabled="true" clearable>
                            <el-option v-for="item in owners" :label="item.flatsName" :value="item.flatsName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货主负责人" prop="ownerName" style="width: 240px;">
                        <el-select v-model="rows.ownerName" placeholder="请选择货主单位" :disabled="true" clearble>
                            <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线路" prop="lineName" style="width: 240px;">
                        <el-select v-model="rows.lineName" placeholder="请选择线路" :disabled="true" clearable>
                            <el-option v-for="item in lines" :label="item.line_Name" :value="item.line_Name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="吨 运 价" prop="tonFreightPrice" style="width: 240px;">
                        <el-input v-model="rows.tonFreightPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="包车条件吨位" prop="name" style="width: 240px;">
                        <el-input v-model="rows.charterTonnage" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="包车金额" prop="name" style="width: 240px;">
                        <el-input v-model="rows.charterPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="经办人" prop="handlerName" style="width: 240px;">
                        <el-select v-model="rows.handlerName" placeholder="请选择货主单位" :disabled="true" clearable>
                            <el-option v-for="item in owners" :label="item.ownerName" :value="item.ownerName" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签订时间" prop="signedDate" style="width: 240px;">
                        <el-date-picker v-model="rows.signedDate" type="date" placeholder="Pick a date" clearable
                            :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同金额" prop="name" style="width: 240px;">
                        <el-input v-model="rows.ownerContractPrice" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同标的或项目说明" prop="name" style="width: 550px;">
                        <el-input v-model="rows.ownerContractContent" type="textarea" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同主要条款/变更条款" prop="name" style="width: 550px;">
                        <el-input v-model="rows.ownerContractAlter" type="textarea" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="合同文本（附件）" prop="name" style="width: 550px;">
                        <span :disabled="true">{{ rows.ownerContractText.substring(40, 200) }}</span>
                    </el-form-item><br>
                    <span style="text-align: left; margin-right: 490px;">审批记录</span>
                    <el-table :data="record" border style="width: 100%">
                        <el-table-column prop="approvalResult" label="审批结果" width="180">
                            <template #default="scope">
                                <el-tag v-if="scope.row.approvalResult == 3" type="success">通过</el-tag>
                                <el-tag v-if="scope.row.approvalResult == 4" type="danger">拒绝</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="approvalRemark" label="备注" width="180" />
                        <el-table-column prop="approvalDate" label="审批时间">
                            <template #default="scope">
                                {{ scope.row.approvalDate.substring(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="approvalName" label="审批人" />
                    </el-table>
                </el-form>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import axios from '@/api/http'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

//对话框
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

const form = reactive({
    title: '',
    flatsName: '',
    ownerName: '',
    handlerName: '',
    date: '',
    pageIndex: 1,
    pageSize: 10,

})
//多选框
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


const page = reactive({
    total: 0,
    totalPage: 0,
})
//显示列表
const tableData = ref([])
const getownerapproval = () => {
    axios.post('/approval-read/api/ownerapproval/Getownerapproval', form)
        .then(res => {
            tableData.value = res.data
            page.total = res.total
            page.totalPage = res.totalPage
        })
}

//分页方法
const handleSizeChange = (val: number) => {
    form.pageSize = val
    getownerapproval()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    getownerapproval()
}
const rows = reactive({
    "ownerApprovalId": "",
    "ownerContractNumber": "",
    "ownerContractTitle": "",
    "flatsName": "",
    "ownerName": "",
    "lineName": "",
    "tonFreightPrice": 0,
    "charterTonnage": 0,
    "charterPrice": 0,
    "signedDate": "2024-08-30",
    "handlerName": "",
    "ownerContractPrice": 0,
    "ownerContractContent": "",
    "ownerContractAlter": "",
    "ownerContractText": "",
    "createName": "",
    "createDate": "2024-08-30",
    "updateName": "",
    "updateTime": "2024-08-30",
    "ownerContractState": 0,
    "approvalName": "",
    "isDel": 0,
    "approvalContent": ""
})
//审批弹框
const addownercontract = (row: any) => {
    dialogVisible.value = true;
    rows.ownerApprovalId = row.ownerApprovalId
    rows.ownerContractNumber = row.ownerContractNumber
    rows.ownerContractTitle = row.ownerContractTitle
    rows.flatsName = row.flatsName
    rows.ownerName = row.ownerName
    rows.lineName = row.lineName
    rows.tonFreightPrice = row.tonFreightPrice
    rows.charterTonnage = row.charterTonnage
    rows.charterPrice = row.charterPrice
    rows.signedDate = row.signedDate
    rows.handlerName = row.handlerName
    rows.ownerContractPrice = row.ownerContractPrice
    rows.ownerContractContent = row.ownerContractContent
    rows.ownerContractAlter = row.ownerContractAlter
    rows.ownerContractText = row.ownerContractText
    rows.createDate = row.createDate
    rows.ownerContractState = row.ownerContractState
    getapprovalrecord(row.ownerApprovalId)

}

//弹框
const addownercontract1 = (row: any) => {
    dialogVisible1.value = true;
    rows.ownerApprovalId = row.ownerApprovalId
    rows.ownerContractNumber = row.ownerContractNumber
    rows.ownerContractTitle = row.ownerContractTitle
    rows.flatsName = row.flatsName
    rows.ownerName = row.ownerName
    rows.lineName = row.lineName
    rows.tonFreightPrice = row.tonFreightPrice
    rows.charterTonnage = row.charterTonnage
    rows.charterPrice = row.charterPrice
    rows.signedDate = row.signedDate
    rows.handlerName = row.handlerName
    rows.ownerContractPrice = row.ownerContractPrice
    rows.ownerContractContent = row.ownerContractContent
    rows.ownerContractAlter = row.ownerContractAlter
    rows.ownerContractText = row.ownerContractText
    rows.createDate = row.createDate
    rows.ownerContractState = row.ownerContractState
    getapprovalrecord(row.ownerApprovalId)

}

//验证
const rules = reactive<FormRules<RuleForm>>({
    ownerContractTitle: [
        { required: true, message: '请输入合同标题', trigger: 'blur' },
    ],
    flatsName: [
        { required: true, message: '请输入外协单位', trigger: 'blur' },
    ],
    ownerName: [
        { required: true, message: '请输入货主负责人', trigger: 'blur' },
    ],
    lineName: [
        { required: true, message: '请选择线路', trigger: 'blur' },
    ],
    tonFreightPrice: [
        { required: true, message: '请输入吨运价', trigger: 'blur' },
    ],
    handlerName: [
        { required: true, message: '请选择经办人', trigger: 'blur' },
    ],
    signedDate: [
        { required: true, message: '请选择签订时间', trigger: 'blur' },
    ],
})

//货主下拉框方法
const owners: any = ref([])
const getowner = async () => {
    axios.get('/approval-read/api/ownerapproval/GetOwners')
        .then(res => {
            owners.value = res
        })
}
//线路下拉框方法
const lines: any = ref([])
const getline = async () => {
    axios.get('/approval-read/api/ownerapproval/GetLines')
        .then(res => {
            lines.value = res
        })
}

//审批
const addownerapprovals = async (state: any) => {
    axios.post('/approval-read/api/ownerapproval/ApprovalOnboard?type=' + state, rows)
        .then(res => {
            if (res > 0) {
                ElMessage.success('审批成功')
                getownerapproval()
            }
            else {
                ElMessage.error('审批失败')
            }
            dialogVisible.value = false;
        })

}
//获取审批记录
const record: any = ref([])
const getapprovalrecord = async (id: any) => {
    axios.get('/approval-read/api/ownerapproval/GetApprovalrecords?Id=' + id)
        .then(res => {
            record.value = res
        })
}


onMounted(() => {
    getownerapproval()
    getowner()
    getline()

})

</script>